
// pages/repair/repair.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
    // 模拟学历数据，格式：[{label: '标签', value: 数量, color: '颜色'}, ...]
    degreeData: [
        { label: '本科', value: 3, color: '#36a2eb' },
        { label: '研究生', value: 1, color: '#ff6384' },
        { label: '博士', value: 1, color: '#ffcd56' },
        { label: '工程师', value: 2, color: '#4bc0c0' },
        // { label: '(Null)', value: 3, color: '#9966ff' },
      ],
    },
    // fetchDegreeData() {
    //     wx.request({
    //       url: 'http://10.10.18.237:8080/user/selectUser', // 后端接口地址
    //       method: 'GET',
    //       success: (res) => {
    //         if (res.statusCode === 200) {
    //           // 处理后端返回的数据（需匹配图表所需格式）
    //           const processedData = res.data.map(item => ({
    //             label: item.degree, // 假设后端返回学历名称
    //             value: item.count, // 数量
    //             color: item.color || '#36a2eb' // 可选颜色字段
    //           }));
    //           this.setData({ degreeData: processedData }, () => {
    //             this.drawPieChart(); // 数据更新后重新绘制图表
    //           });
    //         }
    //       },
    //       fail: (err) => {
    //         console.error('数据获取失败:', err);
    //         wx.showToast({ title: '数据加载失败', icon: 'none' });
    //       }
    //     });
    //   },
    drawPieChart() {
        const { degreeData } = this.data;
        // 获取 Canvas 上下文
        const query = wx.createSelectorQuery().in(this);
        query.select('#pieCanvas')
          .fields({ node: true, size: true })
          .exec((res) => {
            const canvas = res[0].node;
            const ctx = canvas.getContext('2d');
            const dpr = wx.getSystemInfoSync().pixelRatio; 
            canvas.width = res[0].width * dpr; 
            canvas.height = res[0].height * dpr; 
            ctx.scale(dpr, dpr); 
    
            // 计算总和
            const total = degreeData.reduce((sum, item) => sum + item.value, 0);
            // 饼图中心坐标、半径
            const centerX = 200, centerY = 200;
            const radius = 120; 
            let startAngle = -Math.PI / 2; 
    
            degreeData.forEach((item, index) => {
              const proportion = item.value / total; 
              const endAngle = startAngle + proportion * 2 * Math.PI; 
    
              // 绘制扇形
              ctx.beginPath();
              ctx.moveTo(centerX, centerY);
              ctx.arc(centerX, centerY, radius, startAngle, endAngle);
              ctx.closePath();
              ctx.fillStyle = item.color;
              ctx.fill();
    
              // 记录当前结束角度，作为下一个扇形的起始角度
              startAngle = endAngle;
    
              // 绘制引导线 + 文本（简易版，可优化位置计算）
              const midAngle = (startAngle + endAngle) / 2; 
              const textRadius = radius + 20; 
              const x = centerX + Math.cos(midAngle) * textRadius;
              const y = centerY + Math.sin(midAngle) * textRadius;
              ctx.beginPath();
              ctx.moveTo(centerX + Math.cos(midAngle) * radius, centerY + Math.sin(midAngle) * radius);
              ctx.lineTo(x, y);
              ctx.strokeStyle = '#999';
              ctx.stroke();
    
              ctx.fillStyle = '#333';
              ctx.font = '14px sans-serif';
              ctx.textAlign = midAngle > Math.PI ? 'right' : 'left';
              ctx.fillText(`${item.label} (${(proportion * 100).toFixed(1)}%)`, x, y);
            });
    
            // 绘制图例（简易版，固定右侧）
            const legendX = 350, legendY = 100;
            degreeData.forEach((item, index) => {
              const y = legendY + index * 30;
              // 图例方块
              ctx.fillStyle = item.color;
              ctx.fillRect(legendX, y, 12, 12);
              // 图例文本
              ctx.fillStyle = '#333';
              ctx.font = '13px sans-serif';
            //   ctx.fillText(`${item.label}`, legendX-20 , y -50);
            });
          });
      },
    onLoad(options) {
        // wx.request({
        //   url: 'http://10.10.18.237:8080/user/selectUser',
        //   success(res){
        //       console.log(res.data);
        //   }
        // })
        this.drawPieChart();

        // this.fetchDegreeData(); 
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
    //   this.fetchRepairs();
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
  
    }
  })